<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>欢迎您登录闪特商城</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/login.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/{$Think.config.COLOR_STYLE}.css" media="all">
  </head>
  <body id="login-page">
    <div id="main-content">

      <!-- 主体 -->
      <div class="login-body">
        <div class="login-main pr">
          <form action="{:U('login')}" method="post" class="login-form">
            <h3 class="welcome"><i class="login-logo"></i>管理平台</h3>
            <div id="itemBox" class="item-box">
              <div class="item">
                <i class="icon-login-user"></i>
                <input type="text" name="username" placeholder="请填写用户名" autocomplete="off" />
              </div>
              <span class="placeholder_copy placeholder_un">请填写用户名</span>
              <div class="item b0">
                <i class="icon-login-pwd"></i>
                <input type="password" name="password" placeholder="请填写密码" autocomplete="off" />
              </div>
              <span class="placeholder_copy placeholder_pwd">请填写密码</span>
              <egt name="login_times" value="5">
                  <div class="item b1">
                    <input type="text" maxlength="6" name="verify" placeholder="请填写验证码" autocomplete="off" />
                  </div>
                  <span class="placeholder_copy placeholder_pwd">请填写验证码</span>
                  <div class="item b2 reloadverify">
                    <img  onclick="this.src='/Public/verify'" class="verifyimg" src="{:U('Public/verify')}" />
                  </div>
              </egt>
            </div>
            <div class="login_btn_panel">
              <button class="login-btn" type="submit">
                <span class="in"><i class="icon-loading"></i>登 录 中 ...</span>
                <span class="on">登 录</span>
              </button>
              <div class="check-tips"></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  <!--[if lt IE 9]>
  <script type="text/javascript" src="__JS__/jquery/jquery-1.10.2.min.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
  <script type="text/javascript" src="__JS__/jquery/jquery-2.0.3.min.js"></script>
  <!--<![endif]-->
  <script type="text/javascript">
    /* 登陆表单获取焦点变色 */
    $(".login-form").on("focus", "input", function(){
      $(this).closest('.item').addClass('focus');
    }).on("blur","input",function(){
      $(this).closest('.item').removeClass('focus');
    });
    var login_times = "{$login_times}";

    //表单提交
    $(document)
      .ajaxStart(function(){
        $("button:submit").addClass("log-in").attr("disabled", true);
      })
      .ajaxStop(function(){
        $("button:submit").removeClass("log-in").attr("disabled", false);
      });

    $("form").submit(function(){
      var self = $(this);
      $.post(self.attr("action"), self.serialize(), function(data){
          if(data.status){
              window.location.href = data.url;
            }else{
              login_times ++ ;
              if(login_times == 5){
                  window.location.href = data.url;
              }
              self.find(".check-tips").text(data.info);
              //刷新验证码
              $(".reloadverify").click();
            }
      }, "json");
      
      return false;
    });

    $(function(){
      //初始化选中用户名输入框
      $("#itemBox").find("input[name=username]").focus();
      //刷新验证码
      var verifyimg = $(".verifyimg").attr("src");
      $(".reloadverify").click(function(){
        if(verifyimg.indexOf('?')>0){
          $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
        }else{
          $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
        }
      });

      //placeholder兼容性
      //如果支持 
      function isPlaceholer(){
        var input = document.createElement('input');
        return "placeholder" in input;
      }
      //如果不支持
      if(!isPlaceholer()){
        $(".placeholder_copy").css({
          display:'block'
        })
        $("#itemBox input").keydown(function(){
          $(this).parents(".item").next(".placeholder_copy").css({
            display:'none'
          })                    
        })
        $("#itemBox input").blur(function(){
          if($(this).val()==""){
            $(this).parents(".item").next(".placeholder_copy").css({
              display:'block'
            })                      
          }
        })
      }
    });
  </script>
</body>
</html>
